import './App.css';
// import About from './views/About';
// import Home from './views/Home';
// import Dashboard from './views/Dashboard';
// import ClassCom from './views/ClassCom';
import RouteConfig from './router';

import { BrowserRouter, Link, useRoutes } from 'react-router-dom';

const Index = () => {
    const element = useRoutes(RouteConfig);
    return (
        <div className="page">
            <div className="content">{element}</div>
        </div>
    );
};

function App() {
    return (
        <div>
            <BrowserRouter>
                <Header />
                {/* <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/test" element={<ClassCom />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                </Routes> */}
                <Index />
            </BrowserRouter>
        </div>
    );
}
const Header = () => {
    return (
        <ul>
            <li>
                <Link to="/">首页</Link>
            </li>
            <li>
                <Link to="/c">useEfect和useLayoutEffect区别</Link>
            </li>
            <li>
                <Link to="/context">useContext使用</Link>
            </li>
            <li>
                <Link to="/m">移动端demo</Link>
            </li>
            <li>
                <Link to="/test">test</Link>
            </li>
            <li>
                <Link to="/about">关于</Link>
            </li>
            <li>
                <Link to="/dashboard">仪表盘</Link>
            </li>
        </ul>
    );
};

export default App;
